export default function PremiumRealEstatePage() {
  const properties = [
    {
      id: 1,
      title: 'Luxury Sky Villa',
      location: 'Civil Lines, Kanpur',
      price: '₹2.4 Cr',
      size: '4200 Sq.ft',
      bedrooms: '4 BHK',
      image:
        'https://images.unsplash.com/photo-1600585154526-990dced4db0d?q=80&w=1400&auto=format&fit=crop',
      description:
        'Ultra-premium villa with smart home automation, private garden, luxury interiors, and skyline balcony.',
      amenities: ['Smart Home', 'Private Parking', 'Garden', 'Security', 'Club House'],
      iframe:
        'https://www.google.com/maps/embed?pb=!4v1710000000000!6m8!1m7!1sCAoSLEFGMVFpcFBZb2t0Y3Vfd2hP!2m2!1d26.449923!2d80.331873!3f75!4f0!5f0.7820865974627469'
    },
    {
      id: 2,
      title: 'Modern Family Apartment',
      location: 'Swaroop Nagar, Kanpur',
      price: '₹88 Lakh',
      size: '1850 Sq.ft',
      bedrooms: '3 BHK',
      image:
        'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=1400&auto=format&fit=crop',
      description:
        'Premium apartment with modern architecture, modular kitchen, and luxury amenities for family living.',
      amenities: ['Gym', 'Swimming Pool', 'Lift', 'Parking', 'Power Backup'],
      iframe:
        'https://www.google.com/maps/embed?pb=!4v1710000000000!6m8!1m7!1sCAoSLEFGMVFpcFBZb2tYb2xqQm9!2m2!1d26.449923!2d80.331873!3f75!4f0!5f0.7820865974627469'
    }
  ];

  return (
    <div className="min-h-screen bg-black text-white overflow-hidden">
      {/* HERO SECTION */}
      <section className="relative h-screen flex items-center justify-center text-center px-6">
        <div
          className="absolute inset-0 bg-cover bg-center opacity-40"
          style={{
            backgroundImage:
              "url('https://images.unsplash.com/photo-1600607687644-c7f34b5c7f91?q=80&w=1600&auto=format&fit=crop')"
          }}
        />

        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/40 to-black" />

        <div className="relative z-10 max-w-5xl">
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full border border-white/20 bg-white/10 backdrop-blur-md mb-6 text-sm tracking-wide">
            NFC Powered Premium Real Estate Experience
          </div>

          <h1 className="text-5xl md:text-7xl font-bold leading-tight tracking-tight">
            Explore Properties
            <span className="block text-yellow-400">In A Luxury Digital Way</span>
          </h1>

          <p className="mt-6 text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Tap NFC card or scan QR to instantly access 3D property tours, pricing,
            floor plans, location maps, AI assistance, and direct WhatsApp inquiry.
          </p>

          <div className="mt-10 flex flex-wrap gap-4 justify-center">
            <button className="px-8 py-4 rounded-2xl bg-yellow-400 text-black font-semibold text-lg hover:scale-105 transition-all shadow-2xl">
              Explore Properties
            </button>

            <button className="px-8 py-4 rounded-2xl border border-white/20 bg-white/10 backdrop-blur-md hover:bg-white/20 transition-all text-lg">
              Book Site Visit
            </button>
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section className="py-24 px-6 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Premium Property Experience
          </h2>
          <p className="text-gray-400 text-lg max-w-3xl mx-auto">
            Designed for modern builders, luxury real estate dealers, and premium clients.
          </p>
        </div>

        <div className="grid md:grid-cols-4 gap-6">
          {[
            '3D Property Tours',
            'Instant WhatsApp Inquiry',
            'NFC Tap Access',
            'Interactive Catalog'
          ].map((item, index) => (
            <div
              key={index}
              className="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-md p-8 hover:bg-white/10 transition-all"
            >
              <div className="text-yellow-400 text-3xl mb-4">✦</div>
              <h3 className="text-2xl font-semibold mb-3">{item}</h3>
              <p className="text-gray-400 leading-relaxed">
                Experience modern luxury presentation with high-conversion digital interactions.
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* PROPERTY CATALOG */}
      <section className="py-24 px-6 bg-gradient-to-b from-black to-zinc-900">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center mb-16 gap-6">
            <div>
              <h2 className="text-4xl md:text-5xl font-bold mb-4">
                Featured Properties
              </h2>
              <p className="text-gray-400 text-lg">
                Premium catalog with immersive property showcase.
              </p>
            </div>

            <div className="flex gap-3 flex-wrap">
              <button className="px-5 py-3 rounded-xl bg-yellow-400 text-black font-semibold">
                All
              </button>
              <button className="px-5 py-3 rounded-xl border border-white/10 bg-white/5">
                Villas
              </button>
              <button className="px-5 py-3 rounded-xl border border-white/10 bg-white/5">
                Apartments
              </button>
            </div>
          </div>

          <div className="grid gap-10">
            {properties.map((property) => (
              <div
                key={property.id}
                className="grid lg:grid-cols-2 gap-8 rounded-[40px] overflow-hidden border border-white/10 bg-white/5 backdrop-blur-md shadow-2xl"
              >
                {/* IMAGE */}
                <div className="relative h-full min-h-[400px] overflow-hidden">
                  <img
                    src={property.image}
                    alt={property.title}
                    className="w-full h-full object-cover hover:scale-110 transition-all duration-700"
                  />

                  <div className="absolute top-6 left-6 px-4 py-2 rounded-full bg-yellow-400 text-black font-semibold shadow-xl">
                    {property.price}
                  </div>
                </div>

                {/* DETAILS */}
                <div className="p-8 lg:p-12 flex flex-col justify-between">
                  <div>
                    <div className="flex items-center gap-2 text-yellow-400 mb-3 text-sm tracking-widest uppercase">
                      Premium Listing
                    </div>

                    <h3 className="text-4xl font-bold mb-4 leading-tight">
                      {property.title}
                    </h3>

                    <p className="text-gray-400 text-lg mb-6">
                      📍 {property.location}
                    </p>

                    <p className="text-gray-300 leading-relaxed text-lg mb-8">
                      {property.description}
                    </p>

                    {/* PROPERTY INFO */}
                    <div className="grid grid-cols-3 gap-4 mb-8">
                      <div className="rounded-2xl bg-black/40 border border-white/10 p-4 text-center">
                        <div className="text-sm text-gray-400">Type</div>
                        <div className="text-xl font-semibold mt-1">{property.bedrooms}</div>
                      </div>

                      <div className="rounded-2xl bg-black/40 border border-white/10 p-4 text-center">
                        <div className="text-sm text-gray-400">Area</div>
                        <div className="text-xl font-semibold mt-1">{property.size}</div>
                      </div>

                      <div className="rounded-2xl bg-black/40 border border-white/10 p-4 text-center">
                        <div className="text-sm text-gray-400">Price</div>
                        <div className="text-xl font-semibold mt-1">{property.price}</div>
                      </div>
                    </div>

                    {/* AMENITIES */}
                    <div className="flex flex-wrap gap-3 mb-8">
                      {property.amenities.map((item, idx) => (
                        <span
                          key={idx}
                          className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-sm"
                        >
                          {item}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* BUTTONS */}
                  <div className="flex flex-wrap gap-4 mt-4">
                    <button className="px-6 py-4 rounded-2xl bg-yellow-400 text-black font-semibold hover:scale-105 transition-all">
                      View Full Details
                    </button>

                    <button className="px-6 py-4 rounded-2xl border border-white/10 bg-white/10 backdrop-blur-md hover:bg-white/20 transition-all">
                      WhatsApp Inquiry
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 3D VIEW SECTION */}
      <section className="py-24 px-6 max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Interactive 3D Property View
          </h2>
          <p className="text-gray-400 text-lg max-w-3xl mx-auto">
            Let clients explore properties virtually before booking site visits.
          </p>
        </div>

        <div className="rounded-[40px] overflow-hidden border border-white/10 bg-white/5 backdrop-blur-md shadow-2xl p-4">
          <iframe
            src="https://www.google.com/maps/embed?pb=!4v1710000000000!6m8!1m7!1sCAoSLEFGMVFpcFBZb2t0Y3Vfd2hP!2m2!1d26.449923!2d80.331873!3f75!4f0!5f0.7820865974627469"
            width="100%"
            height="550"
            allowFullScreen=""
            loading="lazy"
            className="rounded-[30px]"
          />
        </div>
      </section>

      {/* CTA */}
      <section className="py-28 px-6 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-yellow-500/20 to-orange-500/10 blur-3xl" />

        <div className="relative max-w-5xl mx-auto text-center rounded-[40px] border border-white/10 bg-white/5 backdrop-blur-xl p-12 md:p-20 shadow-2xl">
          <h2 className="text-4xl md:text-6xl font-bold leading-tight mb-6">
            Ready To Modernize
            <span className="block text-yellow-400">Your Real Estate Business?</span>
          </h2>

          <p className="text-gray-300 text-lg md:text-xl max-w-3xl mx-auto leading-relaxed mb-10">
            NFC-powered premium property showcase systems with 3D virtual tours,
            luxury UI design, smart lead generation, and WhatsApp automation.
          </p>

          <div className="flex flex-wrap gap-4 justify-center">
            <button className="px-8 py-4 rounded-2xl bg-yellow-400 text-black font-semibold text-lg hover:scale-105 transition-all shadow-2xl">
              Contact Now
            </button>

            <button className="px-8 py-4 rounded-2xl border border-white/10 bg-white/10 backdrop-blur-md hover:bg-white/20 transition-all text-lg">
              Schedule Demo
            </button>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10 py-10 px-6 text-center text-gray-500">
        © 2026 Premium NFC Real Estate Experience • Designed for Modern Builders & Dealers
      </footer>
    </div>
  );
}